<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!--<meta name="format-detection" content="telephone=yes">-->
    <title>机机快修</title>
    <link href="../css/reset-html5.css" rel="stylesheet">
    <link href="../css/mui.min.css" rel="stylesheet">
    <link href="../css/mui.picker.min.css" rel="stylesheet">
    <link href="../css/wx-main.css?20161028_1" rel="stylesheet">
    <script src="../js/jquery-2.2.1.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <link href="../css/mui.previewimage.css" rel="stylesheet">
    <style>
        .btn_{
            margin-top: 15px;
            margin-bottom: 15px;
            color: #ffffff;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            width: 90%;
            margin-left: 5%;
        }
        #agree{
            width: 19px;
            height: 19px;
        }
        .status{
            margin:10px 0;
            width:100%;
        }
    </style>
</head>
<body id="main">
<header class="text-color1">
        <span class="left-btn text-color2" onclick="location.href='my_order.html'">返回</span>
    订单详情
</header>
<div class="mui-card">
    <div class="mui-card-header primary-text">订单状态
        <span style="float: right" v-show="order_list.status>=5  && order_list.after_sale.status==0"  v-on:click="feedback()"><span  class="text-color2" style="font-size: 12px">申请售后</span></span>
        <span style="float: right" v-show="order_list.status==6  && order_list.after_sale.status==1"><span  class="text-color2" style="font-size: 12px">售后处理中</span></span>
    </div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>订单编号：<span v-text="order_list.order_num"></span></p>
            <img class="status" src="image/status/repair/{{order_list.status}}.png" alt="">
            <div class="text-center">
                <span class="circle-1" v-text="order_list.status | getStatus"></span>
                <p class="text-color3 pad" v-show="order_list.status==1">您的订单已提交，我们将尽快为您安排。</p>
                <p class="text-color3 pad" v-show="order_list.status==2">您的订单已提交，我们将尽快为您安排。</p>
                <p class="text-color3 pad" v-show="order_list.status==3">维修师傅已接单，将尽快为您服务。</p>
                <p class="text-color3 pad" v-show="order_list.status==4">维修师傅已为您维修完毕，请检查确认后付款。</p>
                <p class="text-color3 pad" v-show="order_list.status==5">服务已完成，您可对本次服务进行评价。</p>
                <div class="primary-bg text-color2 btn_" id="confirmBtn2" v-show="order_list.status==4" v-on:click="pay()">马上支付</div>
                <div class="primary-bg text-color2 btn_" id="confirmBtn3" v-show="order_list.status==5" v-on:click="comment()">马上评价</div>
                <div v-if="order_list.status==4"><input type="checkbox" id="agree" checked>了解并同意<a href="user_agreement.html">《机机快修用户服务协议》</a></div>
            </div>

        </div>
    </div>
</div>

<div class="mui-card" v-if="order_list.status>2 && order_list.fault_type==1">
    <div class="mui-card-header primary-text">师傅信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <div style="width: 60%;float: left">
                <p>工<span style="visibility: hidden">名</span>号：<span>{{order_list.admin_info.work_num}}</span></p>
                <p>姓<span style="visibility: hidden">名</span>名：<span v-text="order_list.admin_info.admin_name"></span></p>
                <p>手机号：<a v-bind:href="'tel:'+order_list.admin_info.phone">{{order_list.admin_info.phone}}</a></p>
            </div>
            <div style="width: 40%;text-align: center;float: right">
                <img v-bind:src="order_list.admin_info.head_img" style="border-radius:40px;width: 80px" data-preview-src="" data-preview-group="1">
            </div>
        </div>
    </div>
</div>

<div class="mui-card" v-if="order_list.fault_type==2">
    <div class="mui-card-header primary-text">店铺信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p><span style="visibility: hidden">地区</span>店字：{{order_list.admin_info.admin_name}} </p>
            <p><span style="visibility: hidden">地区</span>地址：{{order_list.admin_info.address_info}}</p>
            <p><span style="visibility: hidden">地区</span>电话：{{order_list.admin_info.phone}}</p>
            <p>营业时间：{{order_list.admin_info.run_time}}</p>
        </div>
    </div>
</div>

<div class="mui-card">
    <div class="mui-card-header primary-text">联系信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p><span style="visibility: hidden">地区</span>姓名：{{order_list.uname}}</p>
            <p v-show="order_list.fault_type==1">维修方式：<span class="primary-text">上门维修</span> </p>
            <p v-show="order_list.fault_type==2">维修方式：<span class="primary-text">到店维修</span> </p>
            <p>手机号码：<span v-text="order_list.phone"></span></p>
            <p v-show="order_list.fault_type==1"><span style="visibility: hidden">地区</span>地区：<span v-text="order_list.area_name"></span></p>
            <p v-show="order_list.fault_type==1">详细地址：<span v-text="order_list.address_info"></span></p>
            <p v-show="order_list.fault_type==1">上门时间：<span v-text="order_list.subscribe_time | getLocalTime"></span></p>
            <p><span style="visibility: hidden">地区</span>备注：<span v-text="order_list.message"></span></p>
        </div>
    </div>
</div>

<div class="mui-card">
    <div class="mui-card-header primary-text">维修信息</div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p class="text-center primary-text" style="font-size: 16px" v-text="order_list.phone_name">

            </p>
            <p class="text-center text-color2" style="font-size: 12px" v-text="order_list.color+'，'+order_list.version">

            </p>

            <div class="border-1 pad8 text-center text-color2 mar-btm" v-for="li in order_list.data.fault_info">
                <span v-text="li.name"></span><span class="primary-text" v-text="'('+li.price+'元)'"></span>
            </div>
        </div>
    </div>
    <div class="mui-card-footer">
        订单费用预估：<span class="primary-text" v-text="order_list.price+'元'"></span>
    </div>
</div>

</body>
<script src="../js/mui.min.js"></script>
<script src="../js/mui.zoom.js"></script>
<script src="../js/mui.previewimage.js"></script>
<script src="../js/phone.js"></script>
<script src="layer_mobile/layer.js"></script>
<script>
	//loading层
    mui.previewImage();
    var payClick = false;//支付按钮
    var vue = new Vue({
        el:"#main",
        data:{
            order_list:''
        },
        methods:{
            'get_order_list':function(){
                var that = this;
                var index = layer.open({type: 2,shadeClose:false});
                $.post('../new_index/index.php?m=Home&c=Order&a=getOrderInfo',{order_id:getQueryString('order_id')},function(res){
                    if(res.code==200){
                        that.order_list = res.data
                    }else if(res.code==0){
                        login();
                    }else{
                        alert(res.message);
                    }
                    layer.close(index);
                },'json');
            },
            'pay':function(){
                if($('#agree').is(':checked')){
                    if(!payClick){
                        payClick = true;
                        $('#confirmBtn2').text('支付跳转中...');
                        location.href = 'http://www.gojiw.com/wxpay/example/jsapi.php?order_id='+getQueryString('order_id');
                    }
                }else{
                    alert('请同意后协议后再支付')
                }
            },
            'comment':function(){
                location.href = 'create_comment_2.html?order_id='+getQueryString('order_id');
            },
            'feedback':function(){
                location.href = 'feedback.html?order_id='+getQueryString('order_id');
            }
        },
        ready:function(){
            this.get_order_list();
        }
    });


    Date.prototype.Format = function(format) {
        var date = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S+": this.getMilliseconds()
        };
        if (/(y+)/i.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        for (var k in date) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1
                        ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
            }
        }
        return format;
    };

    //将UTC格式转为正常的日期格式输出
    function getUTCTime(second) {
        var d = new Date();

        //转换毫秒
        d.setTime(second * 1000);

        /*
         var year=d.getFullYear();
         var month=d.getMonth()+1;
         var datenum=d.getDate();
         var hour = d.getHours();
         var minute = d.getMinutes();
         var second = d.getSeconds();
         return year+"-"+month+"-"+datenum + " " + hour+":"+minute+":"+second;
         */

        return d.Format("yyyy-MM-dd hh:mm");
    }


    Vue.filter('getLocalTime', function (value) {
        return getUTCTime(value)
    });

    Vue.filter('getStatus', function (value) {
        return getStatus(value)
    });

    function getStatus(value){
        var status = '';
        switch(parseInt(value))
        {
            case -2:
                status = '已取消';
                break;
            case -1:
                status = '已取消';
                break;
            case 1:
                status = '已下单';
                break;
            case 2:
                 status = '已下单';
                break;
            case 3:
                status = '待维修';
                break;
            case 4:
                status = '待付款';
                break;
            case 5:
                status = '待评价';
                break;
            case 6:
                status = '已完成';
                break;
        }
        return status;
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }
</script>
</html>